

{% load staticfiles %}


<!DOCTYPE html>
<html style="overflow-x:auto;overflow-y:auto;">
<head>
    <title>DjangoAdmin</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="author"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=10"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">
    <script>var d = "";</script>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- 设置浏览器图标 -->
    <link rel="shortcut icon" href="{% static '/ani/static/favicon.ico' %}">
    <!-- 引入jeeplus ajax版本库文件，该文件压缩了jQuery，datatime等常用js文件以提高加载速度 -->
    <link rel="stylesheet" href="{% static '/ani/static/common/css/vendor.css' %}"/>
    <script src="{% static '/ani/static/common/js/vendor.js' %}"></script>
    <!-- 引入依赖的第三方插件 -->
    <link href="{% static '/ani/static/plugin/awesome/4.4/css/font-awesome.min.css' %}" rel="stylesheet"/>
    <script src="{% static '/ani/static/plugin/jquery-validation/1.14.0/jquery.validate.js' %}"
            type="text/javascript"></script>
    <script src="{% static '/ani/static/plugin/jquery-validation/1.14.0/localization/messages_zh.min.js' %}"
            type="text/javascript"></script>
    <script src="{% static '/ani/static/plugin/jquery-validation/1.14.0/validation-methods.js' %}"
            type="text/javascript"></script>
    <link href="{% static '/ani/static/plugin/icheck-1.x/skins/square/_all.css' %}" rel="stylesheet"/>
    <script src="{% static '/ani/static/plugin/icheck-1.x/icheck.js' %}"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('input.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });


    </script>
    <!--省市区三级联动插件-->
    <link href="{% static '/ani/static/plugin/city-picker/css/city-picker.css' %}" rel="stylesheet" type="text/css"/>
    <script src="{% static '/ani/static/plugin/city-picker/js/city-picker.data.js' %}" type="text/javascript"></script>
    <script src="{% static '/ani/static/plugin/city-picker/js/city-picker.js' %}" type="text/javascript"></script>

    <!-- 引入layer插件,当做独立组件使用，不使用layui模块，该版本修复了chrome下花屏的bug -->
    <script src="{% static '/ani/static/plugin/layui/layer/layer.js' %}"></script>
    <script src="{% static '/ani/static/plugin/layui/laytpl/laytpl.js' %}"></script>


    <!--引入webuploader-->
    <link rel="stylesheet" type="text/css" href="{% static '/ani/static/plugin/webuploader-0.1.5/webuploader.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/ani/static/plugin/webuploader-0.1.5/demo.css' %}">
    <script type="text/javascript" src="{% static '/ani/static/plugin/webuploader-0.1.5/webuploader.js' %}"></script>

    <!-- 引入toastr -->
    <link rel="stylesheet" type="text/css" href="{% static '/ani/static/plugin/toastr/toastr.css' %}">
    <script type="text/javascript" src="{% static '/ani/static/plugin/toastr/toastr.min.js' %}"></script>

    <!--引入select2-->
    <link rel="stylesheet" type="text/css" href="{% static '/ani/static/plugin/select2/css/select2.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/ani/static/plugin/select2/css/select2-bootstrap.css' %}">
    <script type="text/javascript" src="{% static '/ani/static/plugin/select2/js/select2.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/ani/static/plugin/select2/js/i18n/zh-CN.js' %}"></script>

    <!-- 引入自定义文件 -->
    <script type="text/javascript">var ctx = '/ani/a', ctxStatic = '/ani/static';</script>
    <link rel="stylesheet" id="theme" href="{% static '/ani/static/common/css/app-blue.css' %}"/>
    <script src="{% static '/ani/static/common/js/jeeplus.js' %}"></script>


    <meta name="decorator" content="ani"/>

    {#    <script>#}
    {#        if (window.top !== window.self) {#}
    {#            window.top.location = window.location;#}
    {#        }#}
    {#    </script>#}
    {#    <script type="text/javascript">#}
    {#        $(document).ready(function () {#}
    {#            $("#loginForm").validate({#}
    {#                rules: {#}
    {#                    validateCode: {remote: "/ani/servlet/validateCodeServlet"}#}
    {#                },#}
    {#                messages: {#}
    {#                    username: {required: "请填写用户名."}, password: {required: "请填写密码."},#}
    {#                    validateCode: {remote: "验证码不正确.", required: "请填写验证码."}#}
    {#                },#}
    {#                errorLabelContainer: "#messageBox",#}
    {#                errorPlacement: function (error, element) {#}
    {#                    error.appendTo($("#loginError").parent());#}
    {#                }#}
    {#            });#}
    {#        });#}
    {#        // 如果在框架或在对话框中，则弹出提示并跳转到首页#}
    {#        if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0) {#}
    {#            alert('未登录或登录超时。请重新登录，谢谢！');#}
    {#            top.location = "/system/login";#}
    {#        }#}
    {#    </script>#}


</head>
<body id="" class="" style="">


<div class="login-page">
    <div class="row">
        <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
            <img class="img-circle" src="{% static '/ani/static/common/images/flat-avatar.png' %}" class="user-avatar"/>
            <h1>DjangoAdmin</h1>












            {% if login_error %}
                <!-- 0:隐藏tip, 1隐藏box,不设置显示全部 -->
                <div id="messageBox" class="alert alert-success">
                    <button data-dismiss="alert" class="close">×</button>
                    {{ login_error }}</div>
            {% endif %}


            <form>
                {% csrf_token %}
                <div class="form-content">
                    <div class="form-group">
                        <input type="text" id="username" name="username"
                               class="form-control input-underline input-lg required" value="" placeholder="用户名">
                    </div>

                    <div class="form-group">
                        <input type="password" id="password" name="password" value=""
                               class="form-control input-underline input-lg required" placeholder="密码">
                    </div>

                    <ul class="pull-right btn btn-info btn-circle"
                        style="background-color:white;height:45px;width:46px">
                        <li class="dropdown color-picker">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">
                                <span><i class="fa fa-circle"></i></span>
                            </a>
                            <ul class="dropdown-menu pull-right animated fadeIn" role="menu">
                                <li class="padder-h-xs">
                                    <table class="table color-swatches-table text-center no-m-b">
                                        <tr>
                                            <td class="text-center colorr">
                                                <a href="#" data-theme="blue" class="theme-picker">
                                                    <i class="fa fa-circle blue-base"></i>
                                                </a>
                                            </td>
                                            <td class="text-center colorr">
                                                <a href="#" data-theme="green" class="theme-picker">
                                                    <i class="fa fa-circle green-base"></i>
                                                </a>
                                            </td>
                                            <td class="text-center colorr">
                                                <a href="#" data-theme="red" class="theme-picker">
                                                    <i class="fa fa-circle red-base"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center colorr">
                                                <a href="#" data-theme="purple" class="theme-picker">
                                                    <i class="fa fa-circle purple-base"></i>
                                                </a>
                                            </td>
                                            <td class="text-center color">
                                                <a href="#" data-theme="midnight-blue" class="theme-picker">
                                                    <i class="fa fa-circle midnight-blue-base"></i>
                                                </a>
                                            </td>
                                            <td class="text-center colorr">
                                                <a href="#" data-theme="lynch" class="theme-picker">
                                                    <i class="fa fa-circle lynch-base"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <label class="inline">
                        <input type="checkbox" id="rememberMe" name="rememberMe" class="ace"/>
                        <span class="lbl"> 记住我</span>
                    </label>
                </div>
                <input type="submits" class="btn btn-white btn-outline btn-lg btn-rounded progress-login" id="logins"
                       value="登录">
                &nbsp;
                <a href="/register" class="btn btn-white btn-outline btn-lg btn-rounded progress-login">注册</a>
            </form>
        </div>
    </div>
</div>

<script>


    $(function () {
        $('.theme-picker').click(function () {
            changeTheme($(this).attr('data-theme'));
        });

    });

    $(function () {
        //点击发送ajax请求
        $('#logins').click(function () {
            username = $('#username').val();
            password = $('#password').val();
            rememberMe = $('#rememberMe').val();

            var params = {
                "username": username,
                "password": password,
                "rememberMe": rememberMe,
            };

            $.ajax({
                type: "post",
                async: false,
                url: "/login_info",
                contentType: "application/json",
                // 响应数据的格式
                dataType: "json",
                data: JSON.stringify(params),

                success: function (resp) {
                    {#alert(resp.errmsg)#}
                    if (resp.code == "0") {
                        // 刷新当前界面
                        location.href = '/index/';
                    } else {
                        alert(resp.errmsg)
                    }
                }
            })
        })
    })

    function changeTheme(theme) {
        $('<link>')
            .appendTo('head')
            .attr({type: 'text/css', rel: 'stylesheet'})
            .attr('href', '/ani/static/common/css/app-' + theme + '.css');
        $.get('api/change-theme?theme=' + theme);
        $.get('/ani/theme/' + theme + '?url=' + window.top.location.href, function (result) {
        });
    }
</script>
<style>
    li.color-picker i {
        font-size: 24px;
        line-height: 30px;
    }

    .red-base {
        color: #D24D57;
    }

    .blue-base {
        color: #3CA2E0;
    }

    .green-base {
        color: #27ae60;
    }

    .purple-base {
        color: #957BBD;
    }

    .midnight-blue-base {
        color: #2c3e50;
    }

    .lynch-base {
        color: #6C7A89;
    }
</style>

</body>
</html>